@layout("/common/default.html",{title:'添加',libs:['form']}){
		<!--form表单-->
	<form class="layui-form"   lay-filter="layui-form-menu" id="layui-form-menu">
		<input type="hidden" id="onlyid" name="id" value="${menu.id!}">
		<input type="hidden" id="op" name="op" value="${menu.op!}">
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header">基本信息</div>
				<div class="layui-card-body">
					<div class="layui-form-item layui-row">

						<div class="layui-inline layui-col-md9" >
							<label class="layui-form-label">类型</label>
							<div class="layui-input-block">
								<input type="radio" name="type" value="1" title="目录" lay-filter="menuFlag"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>目录</div></div>
								<input type="radio" name="type" value="2" title="菜单" lay-filter="menuFlag"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>菜单</div></div>
								<input type="radio" name="type" value="3" title="按钮" lay-filter="menuFlag"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>按钮</div></div>
							</div>
						</div>


						<div class="layui-inline layui-col-md9">
							<label class="layui-form-label">菜单选择</label>
							<div class="layui-input-block">
								<input type="text" id="parent" name="parent.id" placeholder="请输入" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-inline layui-col-md9">
							<label class="layui-form-label layui-required">菜单名称</label>
							<div class="layui-input-block">
								<input type="text" id="name" name="name"  value="${menu.name!}" lay-verify="required" placeholder="请输入菜单名"
									   autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-inline layui-col-md9">
							<label class="layui-form-label layui-required">请求地址</label>
							<div class="layui-input-block">
								<input type="text" id="href" name="href" value="${menu.href!}"  placeholder="请输入链接"
									   autocomplete="off" class="layui-input">
							</div>
						</div>

						<!--<div class="layui-inline layui-col-md9">
							<label class="layui-form-label">目标</label>
							<div class="layui-input-block">
								<input type="text" id="target" name="target" value="${menu.target!}" lay-verify="" placeholder="请输入目标"
									   autocomplete="off" class="layui-input">
							</div>
						</div>-->

						<div class="layui-inline layui-col-md9">
							<label class="layui-form-label">图标</label>
							<div class="layui-input-block">
								<input type="text" id="icon" name="icon"  lay-verify="" placeholder="请输入图标" lay-filter="iconPicker"
									   autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-inline layui-col-md9">
							<label class="layui-form-label layui-required">权限标识</label>
							<div class="layui-input-block">
								<input type="text" id="permission" name="permission" value="${menu.permission!}"  placeholder="请输入权限标识"
									   autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-inline layui-col-md9" >
							<label class="layui-form-label">是否显示</label>
							<div class="layui-input-block">
								<input type="radio" name="isShow" value="0" title="是" lay-filter="isShowFlag"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>是</div></div>
								<input type="radio" name="isShow" value="1" title="否" lay-filter="isShowFlag" checked><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>否</div></div>
							</div>
						</div>



						<div class="layui-inline layui-col-md9">
							<label class="layui-form-label layui-required">排序</label>
							<div class="layui-input-block">
								<input type="text" id="sort" name="sort" value="${menu.sort!}" lay-verify="required" placeholder="请输入排序"
									   autocomplete="off" class="layui-input">
							</div>
						</div>


					</div>
				</div>
			</div>

		</div>
		<div class="form-group-bottom" style="z-index: 200" align="center">
			<button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
			<button   id="btnclose" class="layui-btn layui-btn-primary"  >&emsp;取消&emsp;</button>
		</div>

	</form>

<script>
	layui.use(['treeSelect','form', 'submitform', 'iconPickerFa'], function () {
		var $ = layui.$,
				treeSelect = layui.treeSelect,
				form = layui.form,
				submitform = layui.submitform,
				iconPickerFa = layui.iconPickerFa;

		//操作类型
		var op='${menu.op!}';

		assec();
		//按钮类型
		var  type="";
		//是否显示
		var isshow="";
		//初始化
		function assec(){
			//添加操作
			if(op=="add"){
				isshow="${menu.isShow!}";
				type="${menu.parent.type!}";
				assecForm(isshow,parseInt(type)+1);
				checkedRadio(parseInt(type)+1);
			} else if(op=="edit"){
				isshow="${menu.isShow!}";
				type="${menu.type!}";
				assecForm(isshow,type)
			}

		}
		//表单赋值
		function assecForm(isshow,type){
			form.val('layui-form-menu', {
				"isShow": ''+isshow+'',
				"type":''+type+'',
			});
		}

			treeSelect.render({
				elem: '#parent',
				title: '上级菜单',
				url: '/sys/menu/treeData',
				icon: 'layui-icon layui-icon-app',
				value: '${menu.parent.id!}',
				label: '${menu.parent.name!}',
			});

		var menuType=$('input:radio[name="type"]:checked').val();

		checkedRadio(menuType);

		//初始化图标选择
		iconPickerFa.render({
			// 选择器，推荐使用input
			elem: '#icon',
			// fa 图标接口
			url: "/static/lib/font-awesome-4.7.0/less/variables.less",
			// 是否开启搜索：true/false，默认true
			search: true,
			// 是否开启分页：true/false，默认true
			page: true,
			// 每页显示数量，默认12
			limit: 12,
			// 点击回调
			click: function (data) {
				var icon=$("#icon").val("fa"+" "+data.icon);
			},
			// 渲染成功后的回调
			success: function (d) {
			}
		});
		iconPickerFa.checkIcon('iconPicker', '${menu.icon!"fa fa-reorder"}');

		//按钮类型
		form.on('radio(menuFlag)', function (data) {

			checkedRadio(data.value);

		});

		//根据按钮类型显示页面
		function checkedRadio(menuType){
			if (menuType == "1") {
				$("#href").parents(".layui-inline").hide();
				$("#permission").parents(".layui-inline").hide();
				$("#icon").parents(".layui-inline").show();

			} else if (menuType == "2") {
				$("#href").parents(".layui-inline").show();
				$("#permission").parents(".layui-inline").show();
				$("#icon").parents(".layui-inline").show();
				$('input[name="href"]').attr('lay-verify',"required" );
				$('input[name="permission"]').attr('lay-verify',"required" );

			} else if (menuType == "3") {
				$("#href").parents(".layui-inline").hide();
				$("#permission").parents(".layui-inline").show();
				$("#icon").parents(".layui-inline").hide();
				$('input[name="permission"]').attr('lay-verify',"required" );
				$("input[name='isShow'][title='否']").attr('checked',true);
			}
		}

		form.on("submit(btnSubmit)", function (data) {
			var field=data.field;

			// 请求后台
			submitform.form('/sys/menu/save',field);
			return false;
		});



	});
</script>

@}
